import { Button, Descriptions, Row, Col, Space, message } from "antd";
import { EyeOutlined, CloudDownloadOutlined } from "@ant-design/icons";
import React from "react";
import Chart from "../../components/Chart";
import { ReadingIncrement } from "./echarts";
import styles from "./detail.less";
import icon from "../../assets/images/admob.png";
import { connect } from "dva";
@connect(({ global }) => ({ userId: global.userId }))
class ResourceSearchDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      infoList: [],
      visitNum: "",
      behaviour: "",
      orderBy: "create_time desc",
      rightBottomList: [],
      releatedMessage: [],
      keys: "",
      id: this.props.match.params.id,
      titleFirst: "",
      isShow: -1,
      releatedKeys: "", //关联数据
      releatedId: "",
      releatedTitle: ""
    };
  }
  componentDidMount = () => {
    // console.log(this.props.location);
    this.getScientificInfo();
    this.selectByCreateTime();
    this.setState(
      {
        releatedId: this.props.location.state.id,
        releatedKeys: this.props.location.state.keys,
        releatedTitle: this.props.location.state.title
      },
      () => this.selectBykeys()
    );
  };
  getScientificInfo = () => {
    let { id } = this.state;
    this.props
      .dispatch({
        type: "global/getScientificInfo",
        payload: {
          id: id
        }
      })
      .then(res => {
        console.log(res)
        this.setState({
          infoList: res.data,
          visitNum: res.data.visitNum,
          keys: res.data.keys,
          titleFirst: res.data.title.charAt(0),
          releatedKeys: res.data.keys, //关联数据
          releatedId: res.data.id,
          releatedTitle: res.data.title
        });
      });
  };
  //科研软件最新资源
  selectByCreateTime = () => {
    this.props
      .dispatch({
        type: "global/selectByCreateTime",
        payload: {
          pageSize: 5,
          currentPage: 0
        }
      })
      .then(res => {
        console.log("rightBottomList", res.data);
        this.setState({
          rightBottomList: res.data
        });
      });
  };
  //最新发布资源
  toSearch = (id, index, title, keys) => {
    console.log(index);
    this.setState(
      {
        id: id,
        isShow: index,
        releatedTitle: title,
        releatedId: id,
        releatedKeys: keys
      },
      () => {
        this.getScientificInfo();
        console.log(this.state.isShow);
        this.selectBykeys();
      }
    );
  };
  //关联数据
  selectBykeys = () => {
    console.log(this.state.releatedId)
    console.log(this.state.releatedKeys)
    console.log(this.state.releatedTitle)
    this.props
      .dispatch({
        type: "global/selectBykeys",
        payload: {
          id: this.state.releatedId,
          keys: this.state.releatedKeys,
          title: this.state.releatedTitle
        }
      })
      .then(res => {
        console.log("selectBykeys", res.data);
        if (res) {
          this.setState({
            releatedMessage: res.data
          });
        }
      });
  };

  //下载
  download = attachment => {
    if (attachment !== "") {
      this.props.dispatch({
        type: "global/download",
        payload: {
          path: `${attachment}`
        }
      })
        .then(blob => {
          console.log("文件流", blob);
          let filename = attachment.split("/")[attachment.split("/").length - 1]
          // // let filename = decodeURI(headers["content-disposition"].split(";")[1].split("filename=")[1]);
          // let blob = new Blob(['\uFEFF' +data])
          // console.log("blob对象",blob);
          const link = document.createElement('a')
          link.download = filename
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
          this.getScientificInfo();
        })
    } else {
      message.error("下载资源不存在");
    }
    this.props
      .dispatch({
        type: "global/Downloads",
        payload: {
          id: this.props.match.params.id
        }
      })
      .then(res => { });
  };
  //数据关联点击
  onChartClick = e => {
    console.log(e);
    this.setState(
      {
        isShow: -1,
        id: e.data.key,
        releatedId: e.data.key,
        releatedKeys: e.data.keys,
        releatedTitle: e.data.name
      },
      () => {
        this.getScientificInfo();
        this.selectBykeys();
      }
    );
  };

  render() {
    let { keys, titleFirst, isShow } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>科研软件</p>
            <p>Scientific research software</p>
          </div>
        </div>
        <div className={styles.detailBox}>
          <div className={styles.detailHead}>
            <div className={styles.clearfix}>
              <div style={{ width: "100%" }}>
                <div className={styles.fl}>
                  <div
                    className={styles.descriptionsIcon}
                    style={{ width: "120px", height: "120px" }}
                  >
                    {this.state.infoList.imgUrls !== "" ? (
                      <img
                        src={this.state.infoList.imgUrls}
                        alt=""
                        style={{ width: "100%", height: "100%" }}
                      />
                    ) : (
                      <div>{titleFirst}</div>
                    )}
                  </div>
                </div>
                <div className={styles.fl}>
                  <div style={{}}>
                    <p className={styles.bigTitle}>
                      {this.state.infoList.title}
                    </p>
                  </div>
                </div>
              </div>
              {/* <div style={{ float: "right", margin: "50px 50px 0 0" }}>

              </div> */}
              <div>
                <div
                  className={styles.detailHeadBottom}
                  style={{ float: "left", marginLeft: "130px" }}
                >
                  <Row>
                    <Col span={6}>
                      <p style={{ marginTop: "-30px", marginLeft: "30px" }}>
                        <EyeOutlined />
                        <span>访问量</span>
                        <span className={styles.num}>
                          {this.props.location.state.visitNum + 1}
                        </span>
                      </p>
                    </Col>
                    <Col span={6}>
                      <p style={{ marginTop: "-30px", marginLeft: "-8px" }}>
                        <CloudDownloadOutlined />
                        <span>下载量</span>
                        <span className={styles.num}>
                          {this.state.infoList.downloadNum}
                        </span>
                      </p>
                    </Col>
                    <Col span={6}>
                      <p style={{ marginTop: "-30px", marginLeft: "-8px" }}>
                      <Button
                        type="primary"
                        style={{ backgroundColor: "#00B5C1" }}
                        onClick={() => this.download(this.state.infoList.attachment)}
                      >
                        立即下载
                </Button>
                      </p>
                    </Col>
                  </Row>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.detailBody}>
            <div className={styles.clearfix}>
              <div className={styles.fl} style={{ width: "75%" }}>
                <div className={styles.detailBodyLeft}>
                  <Descriptions>
                    <Descriptions.Item label="软件类别">
                      {this.state.infoList.name}
                    </Descriptions.Item>
                    <Descriptions.Item label="软件大小">
                      {this.state.infoList.fileSize}
                    </Descriptions.Item>
                    <Descriptions.Item label="开发者">
                      {this.state.infoList.author}
                    </Descriptions.Item>
                    <Descriptions.Item label="适用平台">
                      {this.state.infoList.platform}
                    </Descriptions.Item>
                    <Descriptions.Item label="添加时间">
                      {this.state.infoList.addTime}
                    </Descriptions.Item>
                    <Descriptions.Item label="发布时间">
                      {this.state.infoList.releaseTime}
                    </Descriptions.Item>
                    <Descriptions.Item label="关键词">
                      <Space className={styles.keyWords}>
                        {keys.split(/[,，]/).map((item, index) => {
                          return <span key={index}>{item}</span>;
                        })}
                      </Space>
                    </Descriptions.Item>
                  </Descriptions>
                </div>
                <div
                  className={styles.detailBodyLeft}
                  style={{ marginTop: 20 }}
                >
                  <Descriptions column={1}>
                    <Descriptions.Item label="软件介绍" span={2}>
                      {this.state.infoList.desc}
                    </Descriptions.Item>
                  </Descriptions>
                </div>
              </div>
              <div className={styles.fl} style={{ width: "25%" }}>
                <div className={styles.detailBodyRight}>
                  <div className={styles.detailBodyRightTop}>
                    <p className={styles.detailBodyRightTitle}>数据关联</p>
                    <div className={styles.chartBox}>
                      <Chart
                        option={ReadingIncrement(this.state.releatedMessage)}
                        onChartClick={this.onChartClick}
                      />
                    </div>
                  </div>
                  <div className={styles.detailBodyRightBottom}>
                    <p className={styles.detailBodyRightTitle}>最新发布资源</p>
                    <div className={styles.detailBodyRightBottomList}>
                      <ul>
                        {this.state.rightBottomList.map((item, index) => {
                          return (
                            <li
                              key={index}
                              className={
                                isShow === index ? `${styles.colloractive}` : ``
                              }
                              onClick={() =>
                                this.toSearch(
                                  item.id,
                                  index,
                                  item.title,
                                  item.keys
                                )
                              }
                            >
                              {item.title}
                            </li>
                          );
                        })}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default ResourceSearchDetail;
